<!--  -->
<template>
  <div class="category">
    <el-carousel height="240px">
      <el-carousel-item
        class="carousel"
        v-for="item of slider_data"
        :key="item.id"
      >
        <nuxt-link to='/my'><img
            :src="item.img"
            alt="#"
          ></nuxt-link>
      </el-carousel-item>
    </el-carousel>

    <a
      href="/xiuxianyule/"
      class="link2"
      target="_blank"
    >
      <img
        src="http://p0.meituan.net/codeman/e473bb428f070321269b23370ff02ba956209.jpg"
        alt=""
      >
    </a>
    <div class="login-container">
      <img
        src="//s0.meituan.net/bs/fe-web-meituan/2d05c2b/img/avatar.jpg"
        alt=""
      >
      <p>Hi ! 你好</p>
      <el-button round>注册</el-button>
      <el-button
        round
        class="btn-last"
      >立即登录</el-button>

    </div>
    <a
      href="//hotel.meituan.com"
      class="link-s"
    >
      <img
        src="http://p1.meituan.net/codeman/8cce56c467a17e04f3094d1e455462a0132772.png"
        alt=""
      >
    </a>

    <a
      href="/jiaoyupeixun/?utm_source=MTPCmain-4"
      class="link-s"
      target="_blank"
    >
      <img
        src="http://p1.meituan.net/codeman/16442c19da1f1c4544f794e29d99c92051716.jpg"
        alt=""
      >
    </a>
    <a
      href="http://emis.meishi.meituan.com/merchantsSettled"
      target="_blank"
      class="link6"
    >
      <img
        src="http://p1.meituan.net/codeman/5b21cddb4bb1cbc3a9c3bce0f726c75940469.jpg"
        alt=""
      >
    </a>
    <div class='erweima'>
      <img
        src="//s1.meituan.net/bs/fe-web-meituan/60ac9a0/img/download-qr.png"
        alt=""
      >
      <p class="erweima-middle">美团APP手机版</p>
      <p class="erweima-bottom"><span>1元起 </span> 吃喝玩乐</p>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      slider_data: [
        {
          id: 1,
          img:
            "http://p0.meituan.net/codeman/a97baf515235f4c5a2b1323a741e577185048.jpg"
        },
        {
          id: 2,
          img:
            "https://p1.meituan.net/travelcube/01d2ab1efac6e2b7adcfcdf57b8cb5481085686.png"
        },
        {
          id: 3,
          img:
            "http://p0.meituan.net/codeman/33ff80dc00f832d697f3e20fc030799560495.jpg"
        },
        {
          id: 4,
          img:
            "http://p1.meituan.net/codeman/826a5ed09dab49af658c34624d75491861404.jpg"
        }
      ]
    };
  },

  components: {},

  computed: {},

  methods: {}
};
</script>
<style lang='scss' scoped>
.category {
  width: 80%;
  height: 100%;
  padding-top: 10px;
  box-sizing: border-box;
  // background-color: pink;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-content: space-between;
  img {
    width: 100%;
  }

  .el-carousel {
    width: 550px;
    height: 240px;
    // box-sizing: border-box;
    // border: 1px solid black;
  }

  .link2 {
    width: 150px;
    height: 240px;
    // box-sizing: border-box;
    // border: 1px solid black;
  }
  .login-container {
    width: 230px;
    height: 240px;
    box-sizing: border-box;
    background-color: #fff;
    // border: 1px solid black;
    border: 1px solid #e5e5e5;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    & > * {
      margin: 5px 0;
    }
    img {
      width: 55px;
      height: 55px;
      border-radius: 50%;
    }
    p {
      font-size: 16px;
      color: #222;
      font-weight: 500;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .el-button {
      width: 118px;
    }
    .btn-last {
      margin-left: 0;
    }
  }
  .link-s {
    width: 270px;
    height: 165px;
    // box-sizing: border-box;
    // border: 1px solid black;
  }
  .link6 {
    width: 150px;
    height: 165px;
    // box-sizing: border-box;
    // border: 1px solid black;
  }
  .erweima {
    width: 230px;
    height: 167px;
    box-sizing: border-box;
    // border: 1px solid black;
    border: 1px solid #e5e5e5;
    display: flex;
    flex-flow: column nowrap;
    background-color: #fff;
    justify-content: center;
    align-items: center;
    & > * {
      margin: 5px 0;
    }
    img {
      width: 95px;
    }
    p {
      font-size: 16px;
      color: #222;
      font-weight: 500;
    }
    .erweima-bottom {
      font-size: 12px;

      font-weight: 500;
      color: #3f3f3f;
      span {
        color: red;
      }
    }
  }
}
</style>
